<div class="home_container">
    <app-header [current]="current"></app-header>
    <!-- 万用表 -->
    <app-multimeter *ngIf="this.multimeterService.Mdata.multimeterStatus"></app-multimeter>
    <!-- 退出 -->
    <app-close-window [current]="current"></app-close-window>
    <!--封面 -->
    <div class="cover" *ngIf="this.isvisibel" id="box" (click)="StartPlay()">
        <div class="cover_pic"><img src="./assets/images/home/f_pic_06.png" alt=""></div>
        <div class="cover_btn" (click)="StartPlay()"><img src="./assets/images/home/f_btn_09.png" alt=""></div>
        <audio src="./assets/images/audios/5.mp3" autoplay></audio>
    </div>
    <div class="main">
        <app-tool [current]="current"></app-tool>
        <app-audiotext [current]="current"></app-audiotext>
        <div class="main_content" *ngIf="!this.isvisibel">
            <app-content #contentchild [current]="current"></app-content>
        </div>
    </div>
    <!-- 底部 -->
    <div class="home_hoot">
        <div class="foot_red">
            <div class="foot_red_pozistion">
                <div class="foot_border_down">
                    <span></span>
                </div>
            </div>
        </div>
        <!-- 目录按钮 -->
        <div class="catalog_btn" (click)="showmenu($event)"><img src="./assets/images/home/menu.png" alt="" width="25"></div>
        <div class="foot_line">|</div>
        <div class="foot_title">上汽通用五菱SGMW国六排放课程</div>
        <!-- 翻页 -->
        <div class="foot_paging" *ngIf="!this.isvisibel">
            <ul>
                <li (click)="PrevPage()"><img src="./assets/images/home/prev.png" alt=""></li>
                <li>{{this.current}}</li>
                <li>/</li>
                <li>{{this.total}}</li>
                <li (click)="NextPage()"><img src="./assets/images/home/next.png" alt=""></li>
            </ul>
        </div>
    </div>

    <!-- 目录 -->
    <div class="catalog_box" [ngClass]="{'hide': flag, 'show': !flag}">
        <p class="catalog_title">课程目录</p>
        <ul class="catalognav">
            <ng-template ngFor let-item [ngForOf]='this.data.Catalog'>
                <li (click)="isChildNavShow(item)">
                    <p *ngIf="item.studyState == 1">{{item.navTitle}}</p>
                    <p *ngIf="item.studyState == 2" [ngStyle]="{'color': '#5f7db8'}">{{item.navTitle}}</p>
                    <p *ngIf="item.studyState == 3" [ngStyle]="{'color': '#ffbf00'}">{{item.navTitle}}</p>
                </li>
                <ul class="childnav" *ngIf='item.isExistence'>
                    <ng-template ngFor let-childItem [ngForOf]='item.isChildNav'>
                        <li (click)="isChildNavShow(childItem)">
                            <p *ngIf="childItem.studyState == 1">{{childItem.title}}</p>
                            <p *ngIf="childItem.studyState == 2" [ngStyle]="{'color': '#5f7db8'}">{{childItem.title}}</p>
                            <p *ngIf="childItem.studyState == 3" [ngStyle]="{'color': '#ffbf00'}">{{childItem.title}}</p>
                        </li>
                        <ul class="childParamNav" *ngIf='childItem.isExistence'>
                            <ng-template ngFor let-childParamItem [ngForOf]='childItem.isChildNav'>
                                <li (click)="isChildNavShow(childParamItem)">
                                    <p *ngIf="childParamItem.studyState == 1">{{childParamItem.title}}</p>
                                    <p *ngIf="childParamItem.studyState == 2" [ngStyle]="{'color': '#5f7db8'}">{{childParamItem.title}}</p>
                                    <p *ngIf="childParamItem.studyState == 3" [ngStyle]="{'color': '#ffbf00'}">{{childParamItem.title}}</p>
                                </li>
                            </ng-template>
                        </ul>
                    </ng-template>
                </ul>
            </ng-template>
        </ul>
    </div>
</div>